<template>
  <div class="position">
    <em class="iconfont icon-position">&#xe7f1;</em>
    <span class="text">北京理工大学国防科技园2号楼10层</span>
    <em class="iconfont icon-bell">&#xe60b;</em>
  </div>
  <div class="search">
    <em class="iconfont">&#xe617;</em>
    <span class="text">山姆会员商店优惠商品</span>
  </div>
  <div class="banner">
    <img src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt="" class="pic">
  </div>
  <nav class="nav">
    <div v-for="(item,index) in items" :key="index" class="nav-item">
      <a href="javascript:;">
        <img :src="item.imgUrl" alt="" class="item-pic">

        <p class="item-text">
          {{ item.title }}
        </p>
      </a>
    </div>
  </nav>
  <div class="gap"></div>
</template>

<script>
export default {
  name: 'StaticPart',
  setup () {
    return {
      items: [
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/%E8%B6%85%E5%B8%82.png',
          title: '超市便利'
        },
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/%E8%8F%9C%E5%B8%82%E5%9C%BA.png',
          title: '菜市场'
        },
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/%E6%B0%B4%E6%9E%9C%E5%BA%97.png',
          title: '水果店'
        },
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/%E9%B2%9C%E8%8A%B1.png',
          title: '鲜花绿植'
        },
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/%E5%8C%BB%E8%8D%AF%E5%81%A5%E5%BA%B7.png',
          title: '医药健康'
        },
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/%E5%AE%B6%E5%B1%85.png',
          title: '家居时尚'
        },
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/%E8%9B%8B%E7%B3%95.png',
          title: '烘培蛋糕'
        },
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/签到.png',
          title: '签到'
        },
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/签到.png',
          title: '签到'
        },
        {
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/签到.png',
          title: '签到'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables.scss";
@import "../../style/mixins.scss";

.position {
  font-size: .16rem;
  color: $content-fontcolor;
  position: relative;
  padding-right: .18rem;
  @include ellipsis;

  .iconfont {
    font-size: .16rem;
  }

  .icon-position {
    margin-right: .1rem;
  }

  .icon-bell {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.search {
  height: .32rem;
  background-color: #F5F5F5;
  border-radius: .16rem;
  line-height: .32rem;
  margin-top: .16rem;
  margin-bottom: .12rem;
  color: #B7B7B7;
  font-size: .14rem;

  .iconfont {
    font-size: .16rem;
    margin: .8rem .16rem;
  }
}

.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;

  .pic {
    width: 100%;
  }
}

.nav {
  width: 100%;
  display: flex;
  flex-flow: wrap;
  margin-top: .2rem;

  .nav-item {
    font-size: .12rem;
    text-align: center;
    width: 20%;

    .item-pic {
      width: .4rem;
    }

    .item-text {
      color: $content-fontcolor;
    }
  }
}

.gap {
  height: .1rem;
  background-color: $content-bg-color;
  margin: 0 -.18rem;
}

</style>
